import React, { Component } from "react";
import PropTypes from "prop-types";
import "./index.css";

export default class Item extends Component {
  static propTypes = {
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    done: PropTypes.bool.isRequired,
    delTodo: PropTypes.func.isRequired,
    checkedTodo: PropTypes.func.isRequired
  }
  state = {
    mouse: false
  };
  handleMouse = flag => {
    return () => {
      this.setState({ mouse: flag });
    };
  };
  handleDel = id => {
    return () => {
      this.props.delTodo(id);
    };
  };
  handleCheck = (event, id) => {
    const {
      target: { checked: done }
    } = event;
    this.props.checkedTodo(id, done);
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        className="li"
        style={{ background: mouse ? "#eee" : "" }}
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
      >
        <div className="li-fl">
          <input
            type="checkbox"
            checked={done}
            onChange={event => {
              this.handleCheck(event, id);
            }}
          />
          <span className="li-name">{name}</span>
        </div>
        <span className="li-del" onClick={this.handleDel(id)}>
          删除
        </span>
      </li>
    );
  }
}
